<template>
    <div class="page">
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper">
                <div class="user-wrapper">
                    <div class="item">
                        <div class="text">姓名</div>
                        <div class="form">
                            <input type="text" placeholder="请填写您的姓名" v-model="cur_user.name"/>
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">支付宝</div>
                        <div class="form">
                            <input type="text" placeholder="用于手服网给您打款" v-model="cur_user.alipay"/>
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">所在省</div>
                        <div class="form">
                            <select class="provice" v-model="cur_user.provice" @change.stop.prevent="getCity(cur_user.provice)">
                                <option value="">选择省</option>
                                <option :value="item.name" v-for="item in site" v-if="site">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">所在市</div>
                        <div class="form">
                            <select class="city" v-model="cur_user.city" @change.stop.prevent="getArea(cur_user.city)">
                                <option value="">选择市</option>
                                <option :value="item.name" v-for="item in site_city" v-if="site_city">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">所在区</div>
                        <div class="form">
                            <select class="area" v-model="cur_user.area">
                                <option value="">选择区</option>
                                <option :value="item" v-for="item in site_area" v-if="site_area">{{item}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">地址</div>
                        <div class="form">
                            <input type="text" placeholder="请填写详细地址" v-model="cur_user.address"/>
                        </div>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="btn-wrapper" @click="submitOrder">
                    <button-medium text="确认" bg="#e3e6e9" ref="btn"></button-medium>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import Scroll from '../../base/scroll/scroll.vue'
import {cloneObj, Trim} from '../../common/js/dom.js'
import {mapMutations, mapGetters} from 'vuex'
import ButtonMedium from '../parts/buttonMedium.vue'        //按钮
import {toast, indicator} from '../../base/js/toast.js'     //提示信息
export default {
    data() {
        return {
            site: [],                            //省市区信息
            site_city: [],                       //市信息
            site_area: [],                       //区信息
            cur_user: [],                        //绑定表单的用户信息
        }
    },
    computed: {
        // 获取vuex用户对象的电话
        ...mapGetters([
            'user'
        ])
    },
    components: {Scroll, ButtonMedium},
    created() {
        //把vuex的值拷贝给cur_user（不影响源对象）
        this.cur_user = cloneObj(this.user)

        //获取地址信息
        this.getSite()
    },
    mounted() {
        //初始化地址
        var _this = this
        setTimeout(()=>{
            _this.getCity(_this.user.provice)
            _this.cur_user.city=_this.user.city
        },500)
        setTimeout(()=>{
            _this.getArea(_this.user.city)
            _this.cur_user.area=_this.user.area
        },1000)
    },
    methods: {
        //获取省市区信息
        async getSite() {
            var result = await this.$ajax('/site')
            if(result.status == 200) {
                this.site = result.data
            }
            // console.log(this.site)
        },
        //获取城市列表
        getCity(value){
            this.site.forEach(item=>{
                if(item.name == value){
                    this.site_city = item.city
                    this.site_area = []
                }
            })
            this.cur_user.city=""
            this.cur_user.area=""
        },
        //获取区域列表
        getArea(value){
            this.site_city.forEach(item=>{
                if(item.name == value){
                    this.site_area = item.area
                }
            })
            this.cur_user.area=""
            // console.log(this.cur_user)
        },
        //点击提交信息
        submitOrder(){
            //用户名不能为空
            if(Trim(this.cur_user.name) == ''){
                toast('用户名不能为空!')
                return false
            }
            //支付宝不能为空
            if(Trim(this.cur_user.alipay) == ''){
                toast('支付宝不能为空!')
                return false
            }
            if(Trim(this.cur_user.provice) == ''){
                toast('请选择所在省份!')
                return false
            }
            if(Trim(this.cur_user.city) == ''){
                toast('请选择所在城市!')
                return false
            }
            if(Trim(this.cur_user.area) == ''){
                toast('请选择所在地区!')
                return false
            }
            if(Trim(this.cur_user.address) == ''){
                toast('请输入详细地址!')
                return false
            }
            //全局vux保存user用户信息
            this.setUser(this.cur_user)
            //本地保存用户数据
            localStorage.setItem('hs_user', JSON.stringify(this.cur_user))
            //退回上一页
            this.$router.go(-1)
        },
        //修改用户信息
        ...mapMutations({
            setUser: 'SET_USER' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
    },
    watch: {
        'cur_user':{
            handler: function(curVal,oldVal){
                //按钮灰色
                this.$refs.btn.setBgcolor('#e3e6e9')

                //验证按钮颜色
                if(curVal.name=='') return
                if(curVal.alipay=='') return
                if(curVal.provice=='') return
                if(curVal.city=='') return
                if(curVal.area=='') return
                if(curVal.address=='') return

                //监听用户选择的手机信息，控制提交按钮的样式，黄色
                this.$refs.btn.setBgcolor('#fcdb00')
            },
            deep: true
        }
    }
}
</script>
<style  lang="less" scoped>

@import "../../common/less/variable.less"; 
.scroll-content{
    z-index:92;
    .scroll-warpper{
        .user-wrapper{
            background:#fff;
            padding:0 10px;
            .item{
                display:flex;
                height:50px;
                line-height:50px;
                border-top:1px solid @color-alert-line;
                &.noborder{border:none}
                .text{
                    flex:0 0 70px;
                    font-size:14px;
                    color:@color-alert-title;
                    line-height: 50px;
                }
                .form{
                    flex:1;
                    margin-left:10px;
                    font-size:14px;
                    color:@color-alert-title;
                    line-height:50px;
                    input{
                        font-size:14px;
                        height:50px;
                        line-height:50px;
                        width: 100%;
                        text-indent:4px;
                    }
                    select{
                        border:none;
                        height:50px;
                        width:100%;
                        line-height:50px;
                        margin-right:10px;
                        color:@color-alert-title;
                        box-sizing:border-box;
                        float:left;
                    }
                }
            }
        }
        .btn-wrapper{
            margin-top:10px;
        }
    }
}
</style>
